@charset "utf-8";
/*=================================
CSS Play
October 2012
By : Away
http://www.dfuns.idv.tw
http://away.myds.me/wordpress
=================================*/

a{ text-decoration:none; outline:0;}
img{ border:0;}
body{ background: #DDD url(images/bgX.gif) repeat-x; font-family: "微軟正黑體", Arial, Helvetica, sans-serif;}
.wrap{ width:960px; margin:auto;}
header{ position:relative;}
nav, .logo{ position:absolute;}
nav{ right:0;}
.logo{ left:0; top:-17px;}
.logo a{ display:block; background:url(images/logo.png); width:300px; height:130px; text-indent:-9999px;}
section{ padding:280px 0 120px; background:url(images/sectionBG.jpg) no-repeat 0 160px;}
section h1{ font-size:7em; color:#FFF; text-align:center; margin:0; text-shadow:-1px -1px #666;}
section p{ margin:0; opacity:.8; color:#FFF; text-align:center; line-height:1.8;}
article{ background:#FFF; border-radius:10px; padding:1em 2em; box-shadow:0 0 20px #666 inset; line-height:1.8; letter-spacing:1px; color:#333;}
footer{ line-height:60px; text-align:center;}

/* navgation ===========================================*/
.menu{ overflow:hidden; list-style:none; margin:0; padding:0;}
.menu li{ float:left;}

.menu a{
    display:block; 
    color:#666; 
    font-weight:bold; 
    padding:0 1em; 
    line-height:135px; 
    position:relative;
    -moz-transition:all .3s ease-out;
    -webkit-transition:all .3s ease-out;
}

.menu a span{
    display:block; 
    color:#F90; 
    height:135px; 
    background:#09F; 
    width:100%; 
    z-index:-1; 
    position:absolute; 
    top:-132px; 
    left:0;
    -moz-transition:top .3s ease-out;
    -webkit-transition:top .3s ease-out;
    border: 1px red dashed; 
}

.menu a:hover{ color:#FFF; padding-top:20px; margin-bottom:-20px;}
.menu a:hover span{ top:0;}

